<!DOCTYPE html>
<html lang="en">


<script type="text/javascript" src="../lib/jquery.min.js"></script>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<script>



    var webSocketUrl = 'ws://localhost:8082/chat'

    var webSocket;

    var receiverId;

    var userId;

    if (!window.WebSocket){
        window.WebSocket = window.MozWebSocket;
    }

    if (window.WebSocket){
        webSocket = new WebSocket(webSocketUrl);
        initWebSocket(webSocket);
    }
    

    function initWebSocket(webSocket1) {
        webSocket1.onmessage = function (event) {
            var ta = document.getElementById('msgText');
            ta.value = ta.value + '\n' + event.data;
        }
        webSocket1.onopen = function(event){
            var ta = document.getElementById("msgText");
            ta.value = "已连接服务器!";
        }
        webSocket1.onclose = function(event){
            var ta = document.getElementById("msgText");
            ta.value = "退出聊天室!";
        }

    }

    function send(msg) {

        msg = formatMessage(msg);
        if (!window.WebSocket){
            return;
        }
        if (webSocket.readyState = WebSocket.OPEN){
            webSocket.send(msg);
        }
    }

    function formatMessage(msg){

        var message = {"userId":userId,"receiveUserId":receiverId,"msg":msg};

        return JSON.stringify(message);
    }

    function selectSender(value){
        userId = value;
        webSocket.close();
        webSocket = new WebSocket(webSocketUrl+"?token="+value);
        initWebSocket(webSocket);
    }


    function selectReceiver(value){
        receiver = value;
    }
</script>
<body>


    <form onsubmit="return false" action="">
        <h1>聊天窗口</h1>
        <textarea id="msgText" style="height: 400px;width: 500px;" cols="100" rows="50">


        </textarea><br>



        选择你的角色:
        <label><input name="sender" type="radio" value="1" onclick="selectSender(1)"/>1 </label>
        <label><input name="sender" type="radio" value="2" onclick="selectSender(2)"/>2 </label>
        <label><input name="sender" type="radio" value="3" onclick="selectSender(3)"/>3 </label>
        <label><input name="sender" type="radio" value="4" onclick="selectSender(4)"/>4 </label>
        <label><input name="sender" type="radio" value="4" onclick="selectSender(5)"/>5 </label>
        <label><input name="sender" type="radio" value="-1" onclick="selectSender(-1)" checked="true"/>匿名 </label>
        <br>

        选择信息要发送的角色:

        <label><input name="receiver" type="radio" value="1" onclick="selectReceiver(1)" checked="true"/>1</label>
        <label><input name="receiver" type="radio" value="2" onclick="selectReceiver(2)"/>2</label>
        <label><input name="receiver" type="radio" value="3" onclick="selectReceiver(3)"/>3</label>
        <label><input name="receiver" type="radio" value="4" onclick="selectReceiver(4)"/>4</label>
        <label><input name="receiver" type="radio" value="4" onclick="selectReceiver(5)"/>5</label>


        <br>

        <input type="text" name="msg" style="width: 300px;">
        <input type="button" value="发送" onclick="send(this.form.msg.value)">
        <input type="button" value="清空" onclick="javascript:document.getElementById('msgText').value=''">


    </form>

</body>
</html>